<template>
  <div class="journal">
    <div class="box box-1">
      <div class="title">{{ $t("content.profile.journal.title_1") }}</div>
      <div
        class="desc"
        v-if="globalStore.partDesc.desc1"
        v-html="globalStore.partDesc.desc1"
      ></div>
      <template v-else>
        <div class="pc-skeleton">
          <div class="desc">
            <Skeleton :rows="3"></Skeleton>
          </div>
        </div>
        <div class="mobile-skeleton">
          <div class="desc">
            <Skeleton :rows="3" mobile></Skeleton>
          </div>
        </div>
      </template>

      <div class="part-box blue" @click="gotoJournal(0)">
        <div class="inner">
          <span>{{ $t("btnText.task.start") }}Part |</span>
          <IconArrowRight class="arrow-right"></IconArrowRight>
        </div>
      </div>
    </div>
    <div class="box box-2">
      <div class="left">
        <div class="title">{{ $t("content.profile.journal.title_2") }}</div>
        <div
          class="desc"
          v-if="globalStore.partDesc.desc2"
          v-html="globalStore.partDesc.desc2"
        ></div>
        <template v-else>
          <div class="pc-skeleton">
            <div class="desc">
              <Skeleton :rows="3"></Skeleton>
            </div>
          </div>
          <div class="mobile-skeleton">
            <div class="desc">
              <Skeleton :rows="3" mobile></Skeleton>
            </div>
          </div>
        </template>
        <div class="part-box-container">
          <div
            class="part-box"
            @click="gotoJournal(index)"
            v-for="(item, index) in partList"
            :key="item.label"
          >
            <div class="inner">
              <div class="inner-text">
                <span class="text-ellipsis-1">{{ item.label }}</span>
                <span class="text-ellipsis-1">{{ item.text }}</span>
              </div>
              <IconArrowRight class="arrow-right"></IconArrowRight>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="upload-img">
          <img
            class="logo"
            v-logo-error
            :src="profile?.headimgurl"
            alt=""
            v-if="profile?.headimgurl"
          />
          <img
            class="logo"
            src="~/assets/images/user-logo/default_logo.jpg"
            alt=""
            v-else
          />
          <button @click="onClickUploadHead">{{ $t("btnText.upload") }}</button>
        </div>
        <div class="detail-info">
          <div class="row">
            <template v-if="profile?.last_name">
              <span>{{ profile?.last_name + ' '+ profile?.first_name }}</span>
              <span class="split">|</span>
            </template>

            <template v-if="profile?.country_id">
              <span>{{
                countryStore.getCountryById(profile?.country_id)
              }}</span>
              <span class="split">|</span>
            </template>
            <span>{{ profile?.birthday }}</span>
          </div>
          <div class="row">
            <template v-if="profile?.mobile">
              <span>{{ profile?.mobile }}</span>
              <span class="split">|</span>
            </template>
            <span v-if="profile?.cn_address"
              >Position: {{ profile?.cn_address }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onBeforeMount, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import {
  useMemberStore,
  useCountryStore,
  useGlobalStore,
} from "../../../store";
import { message } from "ant-design-vue";
import { postUploadSingleImg } from "../../../api/api";
import { postDownloadPdfCount, postUpdateMemberOne } from "../../../api/member";
import type { UpdateMemberOneParams } from "../../../types/member";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const { locale } = useI18n();

const { profile } = useMemberStore();
const globalStore = useGlobalStore();
const countryStore = useCountryStore();
const router = useRouter();
const partList = ref([
  {
    label: "Part I",
    text: $t("btnText.task.part_1"),
  },
  {
    label: "Part II",
    text: $t("btnText.task.part_2"),
  },
  {
    label: "Part III",
    text: $t("btnText.task.part_3"),
  },
  {
    label: "Part IV",
    text: $t("btnText.task.part_4"),
  },
  {
    label: "Part V",
    text: $t("btnText.task.part_5"),
  },
  {
    label: "Part VI",
    text: $t("btnText.task.part_6"),
  },
  {
    label: "Part VII",
    text: $t("btnText.task.part_7"),
  },
]);

const setPartList = () => {
  partList.value = [
    {
      label: "Part I",
      text: $t("btnText.task.part_1"),
    },
    {
      label: "Part II",
      text: $t("btnText.task.part_2"),
    },
    {
      label: "Part III",
      text: $t("btnText.task.part_3"),
    },
    {
      label: "Part IV",
      text: $t("btnText.task.part_4"),
    },
    {
      label: "Part V",
      text: $t("btnText.task.part_5"),
    },
    {
      label: "Part VI",
      text: $t("btnText.task.part_6"),
    },
    {
      label: "Part VII",
      text: $t("btnText.task.part_7"),
    },
  ];
};

onBeforeMount(() => {
  setTimeout(() => {
    setPartList();
  });
});

const gotoJournal = async (index: number) => {
  let res = await postDownloadPdfCount();
  if (res.code == 400) {
    message.warning(res.msg);
    goto("/pay");
    return;
  }
  router.push("/member/journal?step=" + (index + 1));
};
function verifySuffix(fileName: string) {
  let suffix = `(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)`;
  var regular = new RegExp(`.*\.${suffix}`);
  return regular.test(fileName);
}

const onClickUploadHead = () => {
  let input = document.createElement("input");
  input.type = "file";
  input.accept = "image/*";
  input.click();
  input.onchange = async (e: any) => {
    let file = e.target.files[0];
    let file_type = file.type;
    if (!verifySuffix(file_type))
      return message.warning($t("message.upload_img.error_2"));
    let formData = new FormData();
    formData.append("file", file);
    let res = await postUploadSingleImg(formData);
    if (res.code === 200) {
      let parmas: UpdateMemberOneParams = {
        field: "headimgurl",
        value: res.img!,
      };
      let res2 = await postUpdateMemberOne(parmas);
      if (res2.code === 200) {
        profile!.headimgurl = res.img!;
      }
    }
  };
};
</script>
<style scoped lang="less">
.box {
  padding: 24px;
}
.journal {
  color: #36434d;
}
.title {
  font-size: 16px;
}
.box {
  border: 1px solid #ccd6de;
  border-radius: 16px 16px 16px 16px;
  overflow: hidden;
}
.desc {
  margin: 16px 0;
  line-height: 25px;
  & * {
    font-size: 14px !important;
  }
}
.box-2 {
  margin-top: 24px;
  background: url("~/assets/images/journal/background.png") no-repeat;
  background-size: 100%;
  display: flex;
  gap: 76px;
  align-items: center;
  .desc {
    width: 420px;
  }
  .part-box-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    .part-box {
      order: 1;
      &:nth-child(2) {
        order: 3;
      }
      &:nth-child(3) {
        order: 5;
      }
      &:nth-child(4) {
        order: 7;
      }
      &:nth-child(5) {
        order: 2;
      }
      &:nth-child(6) {
        order: 4;
      }
      &:nth-child(7) {
        order: 6;
      }
    }
  }
  .right {
    .upload-img {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
      img {
        width: 100px;
        height: 125px;
        border-radius: 6px;
        object-fit: cover;
      }
      button {
        font-size: 14px;
        color: #3d88f2;
        padding: 8px 16px;
        background: #ffffff;
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #3d88f2;
      }
    }
    .detail-info {
      font-size: 14px;
      color: #36434d;
      display: flex;
      flex-direction: column;
      gap: 8px;
      .row {
        display: flex;
        align-items: center;
        gap: 8px;
        .split {
          color: #ccd6de;
        }
      }
    }
  }
}
.part-box {
  padding: 10px 24px;
  border-radius: 12px 12px 12px 12px;
  overflow: hidden;
  font-size: 14px;
  color: #3d88f2;
  background-color: #fff;
  display: inline-block;
  width: 210px;
  cursor: pointer;

  .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &.blue {
    color: #fff;
    background-color: #3d88f2;
    .arrow-right > * {
      fill: #fff;
    }
  }
  .inner-text {
    display: flex;
    gap: 8px;
    span:first-child {
      width: 50px;
    }
    span:last-child {
      width: 100px;
    }
  }
  .arrow-right {
    width: 18px;
    height: 18px;
    & > * {
      fill: #3d88f2;
    }
  }
}

@media screen and (max-width: 768px) {
  .part-box {
    padding: 51px 123px;
    border-radius: 61px;
    font-size: 72px;
    width: 100%;
    .inner-text {
      gap: 41px;
      span:first-child {
        width: auto;
      }
      span:last-child {
        width: auto;
      }
    }
    .arrow-right {
      width: 123px;
      height: 123px;
    }
  }
  .box {
    padding: 82px;
    border-radius: 82px;
    .title {
      font-size: 82px;
    }
    .desc {
      margin: 82px 0;
      line-height: 143px;
      & * {
        font-size: 72px !important;
      }
    }
    &.box-2 {
      margin-top: 123px;
      flex-direction: column;
      gap: 82px;
      background-size: cover;
      .part-box-container {
        grid-template-columns: 1fr;
        gap: 61px;
        .part-box {
          &:nth-child(2) {
            order: 2;
          }
          &:nth-child(3) {
            order: 3;
          }
          &:nth-child(4) {
            order: 4;
          }
          &:nth-child(5) {
            order: 5;
          }
          &:nth-child(6) {
            order: 6;
          }
          &:nth-child(7) {
            order: 7;
          }
        }
      }
      .right {
        .upload-img {
          gap: 61px;
          margin-bottom: 61px;
          img {
            width: 512px;
            height: 639px;
            border-radius: 31px;
          }
          button {
            font-size: 72px;
            width: 266px;
            height: 164px;
            border-radius: 51px;
          }
        }
        .detail-info {
          font-size: 72px;
          .row {
            gap: 36px;
          }
        }
      }
    }
  }
  .box-2 {
    .left {
      width: 100%;
    }
    .desc {
      width: auto;
    }
  }
}
</style>
